<template>
  <div>
    1. 可以直接导入 onXXX 一族的函数来注册生命周期钩子: 只能在 setup() 期间同步使用
    <br />2. 在卸载组件时，在生命周期钩子内部同步创建的侦听器和计算状态也将自动删除
  </div>
  <br />
  <code class="code">
    <h4>3.1 与 2.x 版本生命周期相对应的组合式 API</h4>
    <s>beforeCreate</s> -> 使用 setup()
    <br />
    <s>created</s> -> 使用 setup()
    <br />beforeMount -> onBeforeMount
    <br />mounted -> onMounted
    <br />beforeUpdate -> onBeforeUpdate
    <br />updated -> onUpdated
    <br />beforeDestroy -> onBeforeUnmount
    <br />destroyed -> onUnmounted
    <br />errorCaptured -> onErrorCaptured
    <h4>3.2 新增的(调试)钩子函数</h4>onRenderTracked
    <br />onRenderTriggered
    <br />
    eg: onRenderTriggered(e) {
    debugger
    // 检查哪个依赖性导致组件重新渲染
    },
  </code>
</template>
<script lang="ts">
import {
  defineComponent,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  onErrorCaptured,
  onRenderTracked,
  onRenderTriggered,
  DebuggerEvent,
  watchEffect,
} from "vue";
export default defineComponent({
  name: "c-api-life-cycle",
  props: {
    point: String,
  },
  setup(props, context) {
    watchEffect((onInvalidate) => {
      console.log("API for life-cycle", props);
    });

    onBeforeMount(() => {
      console.log("onBeforeMount!");
    });
    onMounted(() => {
      console.log("onMounted!");
      // console.log(context)
      // context.emit('change-second-level', props.point);
    });
    onBeforeUpdate(() => {
      console.log("onBeforeUpdate!");
    });
    onUpdated(() => {
      console.log("onUpdated!");
    });
    onBeforeUnmount(() => {
      console.log("onBeforeUnmount!");
    });
    onUnmounted(() => {
      console.log("onUnmounted!");
    });
    onErrorCaptured(() => {
      console.log("onErrorCaptured!");
    });
    // onRenderTracked(e) {
    //   debugger
    //   // 检查哪个依赖性导致组件重新渲染
    // }
    // onRenderTriggered(e) {
    //   debugger
    //   // 检查哪个依赖性导致组件重新渲染
    // }
  },
});
</script>
<style lang="less">
.code {
  text-align: left !important;
}
</style>
